```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 完全指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .code-block {
            background-color: #282c34;
            border-radius: 8px;
        }
        .highlight {
            background-color: rgba(110, 142, 251, 0.1);
            border-left: 3px solid #6e8efb;
        }
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #6e8efb;
        }
        .timeline-connector {
            position: absolute;
            left: -25px;
            top: 12px;
            bottom: -12px;
            width: 2px;
            background: #e5e7eb;
        }
        .footer {
            background-color: #1a1a1a;
        }
        .nav-link {
            position: relative;
        }
        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #6e8efb;
            transition: width 0.3s ease;
        }
        .nav-link:hover:after {
            width: 100%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 md:py-32 relative overflow-hidden">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">JavaScript 完全指南</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">从基础到核心概念，全面掌握现代Web开发的基石</p>
                <div class="flex justify-center space-x-4">
                    <a href="#what-is-js" class="px-6 py-3 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-gray-100 transition duration-300">开始学习</a>
                    <a href="#history" class="px-6 py-3 border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:text-indigo-600 transition duration-300">历史沿革</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-center space-x-8">
                <a href="#what-is-js" class="nav-link px-3 py-2 text-gray-700 font-medium hover:text-indigo-600">JavaScript简介</a>
                <a href="#history" class="nav-link px-3 py-2 text-gray-700 font-medium hover:text-indigo-600">历史沿革</a>
                <a href="#vs-java" class="nav-link px-3 py-2 text-gray-700 font-medium hover:text-indigo-600">JS vs Java</a>
                <a href="#basics" class="nav-link px-3 py-2 text-gray-700 font-medium hover:text-indigo-600">基础语法</a>
                <a href="#functions" class="nav-link px-3 py-2 text-gray-700 font-medium hover:text-indigo-600">函数系统</a>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12">
        <!-- What is JavaScript Section -->
        <section id="what-is-js" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fab fa-js text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">什么是 JavaScript</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">核心定义</h3>
                    <p class="mb-6">JavaScript 是一种基于对象和事件驱动的脚本语言，主要嵌入到 HTML 中，应用在客户端，动态操作网页元素，也可以作用于服务端。</p>
                    
                    <div class="mb-6">
                        <h4 class="font-medium text-gray-800 mb-2 flex items-center">
                            <i class="fas fa-star text-yellow-400 mr-2"></i> 主要特点
                        </h4>
                        <ul class="space-y-2 pl-5">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span><strong>交互性</strong> - 表单校验，信息提示，动态数据图表，Ajax异步提交，解析服务端响应数据等</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span><strong>安全性</strong> - 不可以直接访问本地硬盘</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span><strong>跨平台性</strong> - 由浏览器解析执行，和平台无关</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">JavaScript 生态系统</h3>
                    <div class="mermaid">
                        graph TD
                            A[JavaScript] --> B[客户端开发]
                            A --> C[服务端开发]
                            A --> D[移动开发]
                            A --> E[桌面应用]
                            B --> F[React]
                            B --> G[Vue]
                            B --> H[Angular]
                            C --> I[Node.js]
                            D --> J[React Native]
                            D --> K[Flutter]
                            E --> L[Electron]
                    </div>
                    <p class="mt-4 text-sm text-gray-600">JavaScript 已发展成为一个全栈开发语言，覆盖从前端到后端的各种应用场景。</p>
                </div>
            </div>
        </section>

        <!-- History Section -->
        <section id="history" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-history text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">JavaScript 的历史沿革</h2>
            </div>
            
            <div class="relative">
                <div class="timeline-connector"></div>
                
                <div class="timeline-item pl-12 relative mb-12">
                    <div class="card bg-white p-8 rounded-xl shadow-md">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-xl font-semibold text-indigo-600">1995-2001: 浏览器大战时期</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-sm px-3 py-1 rounded-full">历史</span>
                        </div>
                        <p class="mb-6">JavaScript 诞生于1995年，由 Netscape 公司的 Brendan Eich 开发。最初命名为 Mocha，后改名为 LiveScript，最终确定为 JavaScript。</p>
                        
                        <div class="grid md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium mb-2 flex items-center">
                                    <i class="fas fa-trophy text-yellow-500 mr-2"></i> Netscape
                                </h4>
                                <p>JavaScript 最初由 Netscape 开发，并集成在 Netscape Navigator 浏览器中。</p>
                            </div>
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium mb-2 flex items-center">
                                    <i class="fas fa-trophy text-blue-500 mr-2"></i> Microsoft
                                </h4>
                                <p>微软开发了 JScript，集成在 Internet Explorer 中，与 JavaScript 竞争。</p>
                            </div>
                        </div>
                        
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787328386-06b96581-603e-4a00-b965-ddeb2e32e57a.png" alt="JavaScript 历史" class="w-full rounded-lg shadow-sm">
                    </div>
                </div>
                
                <div class="timeline-item pl-12 relative mb-12">
                    <div class="card bg-white p-8 rounded-xl shadow-md">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-xl font-semibold text-indigo-600">ECMAScript 标准</h3>
                            <span class="bg-indigo-100 text-indigo-800 text-sm px-3 py-1 rounded-full">标准化</span>
                        </div>
                        <p class="mb-6">为避免浏览器间的差异，JavaScript 被提交给 ECMA International 进行标准化，形成了 ECMAScript 标准。</p>
                        
                        <div class="overflow-x-auto">
                            <table class="min-w-full bg-white rounded-lg overflow-hidden">
                                <thead class="bg-indigo-50">
                                    <tr>
                                        <th class="py-3 px-4 text-left font-semibold text-indigo-700">版本</th>
                                        <th class="py-3 px-4 text-left font-semibold text-indigo-700">发布时间</th>
                                        <th class="py-3 px-4 text-left font-semibold text-indigo-700">主要特性</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr>
                                        <td class="py-3 px-4">ES1</td>
                                        <td class="py-3 px-4">1997</td>
                                        <td class="py-3 px-4">首个标准化版本</td>
                                    </tr>
                                    <tr class="bg-gray-50">
                                        <td class="py-3 px-4">ES5</td>
                                        <td class="py-3 px-4">2009</td>
                                        <td class="py-3 px-4">JSON、严格模式、数组方法</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 px-4">ES6 (ES2015)</td>
                                        <td class="py-3 px-4">2015</td>
                                        <td class="py-3 px-4">类、模块、箭头函数、Promise</td>
                                    </tr>
                                    <tr class="bg-gray-50">
                                        <td class="py-3 px-4">ES2020</td>
                                        <td class="py-3 px-4">2020</td>
                                        <td class="py-3 px-4">可选链操作符、空值合并</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- JavaScript vs Java -->
        <section id="vs-java" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-code-compare text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">JavaScript vs Java</h2>
            </div>
            
            <div class="card bg-white p-8 rounded-xl shadow-md">
                <div class="mb-8">
                    <div class="mermaid">
                        graph LR
                            A[JavaScript] -->|解释执行| B[浏览器]
                            C[Java] -->|编译执行| D[JVM]
                    </div>
                </div>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center">
                            <i class="fab fa-js mr-2"></i> JavaScript
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>由浏览器解释执行，无需编译</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>弱类型语言 (var 类型)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>基于原型的面向对象</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                <span>主要用于Web开发</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                            <i class="fab fa-java mr-2"></i> Java
                        </h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                                <span>需要编译成字节码再由JVM执行</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                                <span>强类型语言 (int, float, 对象类型等)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                                <span>基于类的面向对象</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                                <span>企业级应用、Android开发等</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="mt-8">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">JavaScript 的组成</h3>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787328623-b839704b-f0a9-49cf-a180-8061057b0260.png" alt="JavaScript组成" class="w-full rounded-lg shadow-sm">
                </div>
            </div>
        </section>

        <!-- Basics Section -->
        <section id="basics" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-book-open text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">JavaScript 基础篇</h2>
            </div>
            
            <!-- Hello World -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-code mr-3"></i> JavaScript 版的 Hello World
                </h3>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="card bg-white p-6 rounded-xl shadow-md">
                        <h4 class="font-medium mb-4 text-gray-800">HTML 中的脚本</h4>
                        <p class="mb-4">JavaScript 代码必须位于 &lt;script&gt; 与 &lt;/script&gt; 标签之间。脚本可被放置在 HTML 页面的 &lt;body&gt; 和 &lt;head&gt; 部分中。</p>
                        
                        <div class="code-block p-4 mb-4">
                            <pre class="text-gray-100 overflow-x-auto">
&lt;script&gt;
    // JavaScript 代码
    alert("Hello World!");
&lt;/script&gt;</pre>
                        </div>
                        
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h5 class="font-medium mb-2 text-blue-800 flex items-center">
                                <i class="fas fa-lightbulb mr-2"></i> 最佳实践
                            </h5>
                            <p class="text-blue-700">现代开发中，通常将 JavaScript 代码放在外部的 .js 文件中，然后通过 &lt;script src="..."&gt; 引入。</p>
                        </div>
                    </div>
                    
                    <div class="card bg-white p-6 rounded-xl shadow-md flex items-center justify-center">
                        <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787328910-44ce5cb3-88d4-4aa9-b437-7668f3ef1432.png" alt="Hello World 示例" class="rounded-lg">
                    </div>
                </div>
            </div>
            
            <!-- Variables -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-pencil-alt mr-3"></i> 定义变量
                </h3>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="highlight p-6 rounded-lg mb-6">
                        <h4 class="font-medium mb-4 text-indigo-700">弱类型 vs 强类型</h4>
                        <p>JavaScript 是弱类型语言，使用 <code class="bg-gray-100 px-2 py-1 rounded">var</code> 定义变量，类型在执行时确定。而 Java 是强类型语言，需要明确指定变量类型。</p>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h5 class="font-medium mb-3 text-gray-800 flex items-center">
                                <i class="fab fa-js text-yellow-500 mr-2"></i> JavaScript
                            </h5>
                            <div class="code-block p-4">
                                <pre class="text-gray-100 overflow-x-auto">
// 数字
var age = 25;

// 字符串
var name = "张三";

// 布尔值
var isStudent = true;

// 数组
var colors = ["red", "green", "blue"];</pre>
                            </div>
                        </div>
                        
                        <div>
                            <h5 class="font-medium mb-3 text-gray-800 flex items-center">
                                <i class="fab fa-java text-blue-500 mr-2"></i> Java
                            </h5>
                            <div class="code-block p-4">
                                <pre class="text-gray-100 overflow-x-auto">
// 数字
int age = 25;

// 字符串
String name = "张三";

// 布尔值
boolean isStudent = true;

// 数组
String[] colors = {"red", "green", "blue"};</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Data Types -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-cubes mr-3"></i> 基本数据类型
                </h3>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787329173-4f1bac00-65b8-4fd0-a122-ea8a73754dd9.png" alt="JavaScript 数据类型" class="mb-8 rounded-lg">
                    
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-800">JavaScript 数字</h4>
                            <p class="mb-4">JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：</p>
                            <div class="code-block p-4 mb-6">
                                <pre class="text-gray-100 overflow-x-auto">
var x1 = 34.00;  // 使用小数点来写
var x2 = 34;     // 不使用小数点来写</pre>
                            </div>
                            
                            <h4 class="font-semibold mb-3 text-gray-800">JavaScript 字符串</h4>
                            <p class="mb-4">字符串是存储字符（比如 "Bill Gates"）的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号：</p>
                            <div class="code-block p-4">
                                <pre class="text-gray-100 overflow-x-auto">
var carname = "Bill Gates";
var carname = 'Bill Gates';</pre>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-800">JavaScript 布尔</h4>
                            <p class="mb-4">布尔（逻辑）只能有两个值：true 或 false。</p>
                            <div class="code-block p-4 mb-6">
                                <pre class="text-gray-100 overflow-x-auto">
var x = true;
var y = false;</pre>
                            </div>
                            
                            <h4 class="font-semibold mb-3 text-gray-800">undefined 和 null</h4>
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs mt-2 mr-2 text-purple-500"></i>
                                    <span><strong>undefined</strong> - 使用已声明但未赋值的变量，都会得到一个值 undefined</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs mt-2 mr-2 text-purple-500"></i>
                                    <span><strong>null</strong> - 被赋予 null 值的变量通常认为已经定义了，只是不代表任何东西</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- typeof -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-search mr-3"></i> typeof 操作符
                </h3>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-800">数字类型</h4>
                            <p class="mb-2">各种数字的结果都是 number:</p>
                            <div class="code-block p-4 mb-4">
                                <pre class="text-gray-100 overflow-x-auto">
typeof 123  // "number"</pre>
                            </div>
                            
                            <p class="mb-2">Infinity 用来代表超过了 JavaScript 处理范围的数值:</p>
                            <div class="code-block p-4 mb-4">
                                <pre class="text-gray-100 overflow-x-auto">
1e308  // 1 × 10^308</pre>
                            </div>
                            
                            <p class="mb-2">两个正无穷大相加会是一个什么结果？</p>
                            <div class="code-block p-4">
                                <pre class="text-gray-100 overflow-x-auto">
Infinity + Infinity  // Infinity
Infinity - Infinity  // NaN</pre>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-800">字符串</h4>
                            <p class="mb-4">字符串转换问题，字符串和数字类型进行数学运算的时候，除了加法运算以外，其他都会转换为数字类型：</p>
                            <div class="code-block p-4 mb-6">
                                <pre class="text-gray-100 overflow-x-auto">
"5" + 2   // "52" (字符串拼接)
"5" - 2   // 3 (数学运算)
"5" * "2" // 10 (数学运算)</pre>
                            </div>
                            
                            <h4 class="font-semibold mb-3 text-gray-800">布尔类型</h4>
                            <p class="mb-2">在 JavaScript 中，除了以下值，其他都是 true:</p>
                            <ul class="list-disc pl-5 mb-4 space-y-1">
                                <li>空字符串 ""</li>
                                <li>null</li>
                                <li>undefined</li>
                                <li>0</li>
                                <li>NaN</li>
                                <li>false</li>
                            </ul>
                            <p class="mb-2">注意：NaN == NaN 吗？如何正确判断是否为 NaN</p>
                            <div class="code-block p-4">
                                <pre class="text-gray-100 overflow-x-auto">
NaN == NaN  // false
isNaN(NaN)  // true</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Arrays -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-list-ul mr-3"></i> 数组
                </h3>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="code-block p-4 mb-6">
                        <pre class="text-gray-100 overflow-x-auto">
// 创建一个数组
var arr = [1, 2, 3];

// 更新数组的元素
arr[1] = 4;  // [1, 4, 3]

// 添加数组的元素
arr.push(5); // [1, 4, 3, 5]

// 删除数组的元素 (delete arr[1], 注意只是将该元素留空)
delete arr[1]; // [1, empty, 3, 5]</pre>
                    </div>
                    
                    <p class="mb-4">数组的数组 (多维数组):</p>
                    <div class="code-block p-4">
                        <pre class="text-gray-100 overflow-x-auto">
var a = [
    [1, 2, 3],
    [4, 5, 6]
];</pre>
                    </div>
                </div>
            </div>
            
            <!-- Control Flow -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-project-diagram mr-3"></i> 流程控制语句
                </h3>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-800">基本控制结构</h4>
                            <ul class="space-y-3 mb-6">
                                <li class="flex items-start">
                                    <i class="fas fa-code text-xs mt-2 mr-2 text-green-500"></i>
                                    <span><strong>if else</strong> - 条件分支</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-code text-xs mt-2 mr-2 text-green-500"></i>
                                    <span><strong>for</strong> - 循环结构</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-code text-xs mt-2 mr-2 text-green-500"></i>
                                    <span><strong>for-in</strong> - 遍历对象属性</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-code text-xs mt-2 mr-2 text-green-500"></i>
                                    <span><strong>while</strong> - 循环结构</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-code text-xs mt-2 mr-2 text-green-500"></i>
                                    <span><strong>do while</strong> - 循环结构</span>
                                </li>
                            </ul>
                            
                            <h4 class="font-semibold mb-3 text-gray-800">循环控制</h4>
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-exclamation-circle text-xs mt-2 mr-2 text-red-500"></i>
                                    <span><strong>break</strong> - 用于跳出循环。</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-arrow-right text-xs mt-2 mr-2 text-blue-500"></i>
                                    <span><strong>continue</strong> - 用于跳过循环中的一个迭代</span>
                                </li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-800">示例：打印星号图案</h4>
                            <div class="code-block p-4 mb-4">
                                <pre class="text-gray-100 overflow-x-auto">
// 打印星号三角形
for (var i = 1; i <= 5; i++) {
    var line = "";
    for (var j = 1; j <= i; j++) {
        line += "*";
    }
    console.log(line);
}
// 输出:
// *
// **
// ***
// ****
// *****</pre>
                            </div>
                            
                            <h4 class="font-semibold mb-3 text-gray-800">示例：求1-100之间的偶数之和</h4>
                            <div class="code-block p-4">
                                <pre class="text-gray-100 overflow-x-auto">
var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 2 === 0) {
        sum += i;
    }
}
console.log("1-100之间的偶数之和: " + sum);</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Functions Section -->
        <section id="functions" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-functions text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">JavaScript 函数系统</h2>
            </div>
            
            <!-- Function Basics -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-cube mr-3"></i> 函数基础
                </h3>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="mb-6">
                        <h4 class="font-semibold mb-3 text-gray-800">JavaScript 函数语法</h4>
                        <p class="mb-4">函数就是包裹在花括号中的代码块，前面使用了关键词 function：</p>
                        <div class="code-block p-4">
                            <pre class="text-gray-100 overflow-x-auto">
function functionName() {
    // 这里是要执行的代码
}
// 调用函数
functionName();</pre>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <h4 class="font-semibold mb-3 text-gray-800">调用带参数的函数</h4>
                        <p class="mb-4">在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。</p>
                        <div class="code-block p-4">
                            <pre class="text-gray-100 overflow-x-auto">
function greet(name) {
    console.log("Hello, " + name);
}
// 调用函数
greet("Alice");  // 输出: Hello, Alice
greet("Bob");    // 输出: Hello, Bob</pre>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-3 text-gray-800">带有返回值的函数</h4>
                        <p class="mb-4">通过使用 return 语句就可以实现返回值。在使用 return 语句时，函数会停止执行，并返回指定的值。</p>
                        <div class="code-block p-4">
                            <pre class="text-gray-100 overflow-x-auto">
function add(a, b) {
    return a + b;
}
// 调用函数并使用返回值
var result = add(5, 3);
console.log(result);  // 输出: 8</pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Function Features -->
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-magic mr-3"></i> 函数特性
                </h3>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="card bg-white p-8 rounded-xl shadow-md">
                        <h4 class="font-semibold mb-4 text-indigo-600">函数也是数据</h4>
                        <p class="mb-6">函数也是一种数据，我们可以把函数赋值给一个变量：</p>
                        <div class="code-block p-4 mb-6">
                            <pre class="text-gray-100 overflow-x-auto">
// 将函数赋值给变量
var add = function(a, b, c) {
    return a + b + c;
}

// 调用函数
var result = add(1, 2, 3);
console.log(result);  // 输出: 6</pre>
                        </div>
                        
                        <h4 class="font-semibold mb-4 text-indigo-600">函数重载</h4>
                        <p class="mb-4">JavaScript 不支持传统意义上的函数重载，但可以通过 arguments 对象模拟：</p>
                        <div class="code-block p-4">
                            <pre class="text-gray-100 overflow-x-auto">
function sum() {
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

console.log(sum(1, 2));      // 3
console.log(sum(1, 2, 3));   // 6
console.log(sum(1, 2, 3, 4));// 10</pre>
                        </div>
                    </div>
                    
                    <div class="card bg-white p-8 rounded-xl shadow-md">
                        <h4 class="font-semibold mb-4 text-indigo-600">预定义函数</h4>
                        
                        <div class="space-y-6">
                            <div>
                                <h5 class="font-medium mb-2 text-gray-800">parseInt() 和 parseFloat()</h5>
                                <p class="mb-2">试图将其收到的任何输入值转换成整数或浮点数类型，转换失败则返回 NaN</p>
                                <div class="code-block p-4">
                                    <pre class="text-gray-100 overflow-x-auto">
parseInt("123")    // 123
parseInt("123abc") // 123
parseInt("abc")    // NaN
parseFloat("3.14") // 3.14</pre>
                                </div>
                            </div>
                            
                            <div>
                                <h5 class="font-medium mb-2 text-gray-800">isNaN() 和 isFinite()</h5>
                                <p class="mb-2">判断是否为非数字或有限数字</p>
                                <div class="code-block p-4">
                                    <pre class="text-gray-100 overflow-x-auto">
isNaN(NaN)       // true
isNaN("123")     // false
isFinite(123)    // true
isFinite(Infinity) // false</pre>
                                </div>
                            </div>
                            
                            <div>
                                <h5 class="font-medium mb-2 text-gray-800">eval()</h5>
                                <p class="mb-2">会将其输入的字符串当作 JavaScript 代码来执行（慎用，有安全风险）</p>
                                <div class="code-block p-4">
                                    <pre class="text-gray-100 overflow-x-auto">
eval("2 + 2")  // 4
var x = 10;
eval("x * 2")  // 20</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Practical Examples -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                    <i class="fas fa-laptop-code text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">实用案例与作业</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">换肤功能</h3>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787442683-cb196226-9750-447d-b42a-241ba884d16e.png" alt="换肤功能" class="rounded-lg mb-6">
                    <p class="mb-4">通过 JavaScript 动态切换网站的样式主题，通常通过修改 CSS 类或直接操作样式属性实现。</p>
                    <div class="code-block p-4">
                        <pre class="text-gray-100 overflow-x-auto">
function changeTheme(theme) {
    document.body.className = theme;
}</pre>
                    </div>
                </div>
                
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600">全选功能案例</h3>
                    <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787442319-070db65b-f256-4c83-ad03-860764faef68.png" alt="全选功能" class="rounded-lg mb-6">
                    <p class="mb-4">实现复选框的全选/全不选功能，常见于表单和列表中。</p>
                    <div class="code-block p-4">
                        <pre class="text-gray-100 overflow-x-auto">
function selectAll(source) {
    var checkboxes = document.getElementsByName('item');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = source.checked;
    }
}</pre>
                    </div>
                </div>
            </div>
            
            <div class="card bg-white p-8 rounded-xl shadow-md mt-8">
                <h3 class="text-xl font-semibold mb-4 text-indigo-600">作业：补全全选功能案例</h3>
                <img src="https://cdn.nlark.com/yuque/0/2023/png/21449790/1692787330060-bd8d2ef4-7deb-4749-957e-ea2078794163.png" alt="全选功能作业" class="rounded-lg mb-6">
                <p class="mb-4">完善全选功能，实现以下要求：</p>
                <ul class="list-disc pl-5 mb-6 space-y-2">
                    <li>点击全选复选框时，选中所有项目</li>
                    <li>点击单个项目时，如果所有项目都被选中，自动选中全选复选框</li>
                    <li>如果取消选中某个项目，自动取消全选复选框的选中状态</li>
                </ul>
                <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-400">
                    <h4 class="font-medium text-yellow-800 flex items-center">
                        <i class="fas fa-lightbulb mr-2"></i> 提示
                    </h4>
                    <p class="text-yellow-700">可以使用事件监听器和数组的 every() 方法来实现这些功能。</p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer text-white py-12">
        <div class="container mx-auto px-6 text-center">
            <h3 class="text-xl font-semibold mb-4">技术小馆</h3>
            <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300 block mb-2">http://www.yuque.com/jtostring</a>
            <p class="text-gray-400 text-sm">© 2023 技术小馆. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        // 初始化 Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>
```